<template>
  <div>
    <div class="item-top">
        <el-avatar shape="square" :src="require('@/assets/avator/'+item.avatar)"></el-avatar>
        <div class="username">{{ item.username }}</div>
        <div class="publishtime">{{item.event.publishtime}}</div>
    </div>
    <div class="item-center">
        <el-descriptions class="tab">
            <el-descriptions-item label="活动主题">{{ item.event.title }}</el-descriptions-item>
            <el-descriptions-item label="活动内容">{{ item.event.detail }}</el-descriptions-item>
            <el-descriptions-item label="地点">{{ item.event.address }},{{ item.event.addressdetail }}</el-descriptions-item>
            <el-descriptions-item label="类型">
                <el-tag size="small">{{ item.event.type }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="活动状态">
                <el-tag size="small" :type="item.event.state == '未开始'?'success':'danger'">{{ item.event.state }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="报名信息">
                <span>{{item.event.signed}}/<b style="color: red; font-size: 16px;">{{ item.event.size }}</b></span>
                <el-tooltip class="item" effect="dark" :content="isSigned?'已报名':''" :disabled="!isSigned" placement="top">
                    <el-button size="mini" class="bm" @click="handleSignIn(item.event.eventid)" :disabled="isSigned" >立即报名</el-button>
                </el-tooltip>
            </el-descriptions-item>
        </el-descriptions>
    </div>
  </div>
</template>

<script>
import {SignInEvent,IsSigned} from '@/request/api'
import {mapActions} from 'vuex'
export default {
  data(){
    return{
        signParams:{
          eventid:null
        },
        isSigned:false
    }
  },
  props:{
    // eventList:{
    //   type:Array,
    //   default:()=>[]
    // },
    item:{
        type:Object,
        default:()=>{
            
        }
    }
  },
  methods:{
    ...mapActions({
        asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    async handleSignIn(eventid){
        this.signParams.eventid = eventid;
        let res = await SignInEvent(this.signParams)
        if(res.data.state == 200){
          // 成功
          this.asyncChangeIsShowToast({
            type:'success',
            msg:'报名成功！'
          })
          this.isSigned = true
        //   更新数据
        this.item.event.signed ++ 
        }else{
          this.asyncChangeIsShowToast({
            type:'error',
            msg:res.data.message
          })
          this.isSigned = false
        }
    }
  },
  async created(){
    // 初始化参数
    this.signParams.eventid = this.item.event.eventid;
    // console.log("eventid",this.signParams.eventid)
    let res = await IsSigned(this.signParams)
    // console.log("判断的结果",res.data.data)
    this.isSigned = res.data.data
  }
}
</script>

<style scoped>
.outer-box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
  border: 1px solid red;
  background-color: white;
}
.right-box{
  flex: 3;
  border: 1px solid yellow;
}
ul{
  list-style: none;
  background-color: white;
}
.item-li{
  padding: 10px;
  /* background-color: rgb(244,244,245); */
  margin-bottom: 10px;
  border: 1px solid rgb(235,235,237);
}
.item-li:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.tab{
  margin-top: 20px;
}
.item-top{
  display: flex;
  flex-direction: row;
  position: relative;
}
.username{
  margin-left: 20px;
  margin-top: 10px;
}
.publishtime{
  position: absolute;
  top: 10px;
  right: 20px;
}
.bm{
  cursor: pointer;
  margin-left: 10px;
}
.bm:hover{
  background-color: #409EFF;
  color: white;
}
.block{
  text-align: center;
}
.radio-box{
  margin-bottom: 20px;
  display: flex;
  flex-direction: row-reverse;
  padding-right: 20px;
}
</style>
